<template>
    <el-drawer
        ref="drawer"
        :visible.sync="visible"
        destroy-on-close
        :size="size"
        :withHeader="false"
        :before-close="beforeClose"
        :append-to-body="innerDrawer"
        custom-class="custom-drawer"
    >
        <slot
            :closeDrawer="closeDrawer"
            :getIsChangeFormData="getIsChangeFormData"
        ></slot>
    </el-drawer>
</template>

<script>
export default {
	name: 'FormPanel',
	props: {
		value: {
			type: Boolean,
			default() {
				return false
			}
		},
		size: {
			type: String,
			default: '50%'
		},
        innerDrawer: {
        	type: Boolean,
        	default() {
        		return false
        	}
        },
	},
	data() {
		return {
			visible: this.value,
			isChangeFormData: false // 表单数据是否有改动
		}
	},
	watch: {
		value(val) {
			if (this.visible !== val) {
				this.visible = val
			}
		},
		visible(val) {
			this.$emit('input', val)
		}
	},
	methods: {
		beforeClose(done) {
			if (this.isChangeFormData) {
				this.$confirm('数据尚未保存，确认要关闭吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				})
					.then(() => {
						done()
						this.isChangeFormData = false
					})
					.catch(() => {})
			} else {
				done()
			}
		},
		getIsChangeFormData(val = false) {
			this.isChangeFormData = val
		},
		closeDrawer() {
			this.$refs.drawer.closeDrawer()
		}
	}
}
</script>

<style lang="scss" scoped>
    
</style>
